<!doctype html>
<html>

<head>
	<meta charset="UTF-8">
	<title>收款码</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="__INDEX__/css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="__INDEX__/css/iconfont.css" />
	<link rel="stylesheet" href="__INDEX__/css/style.css" />
	<link rel="stylesheet" href="__INDEX__/css/mall.css" />	
	<style type="text/css">
		body{background: white;}
		.erweima canvas,.erweima{width: 150px; height: 150px;}
		.erweima{ background: #EEEEEE;}
		.mui-content{padding-bottom: 15px;}		
	</style>
	<!--[if lt IE 9]> 
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
	<![endif]--> 
</head>

<body>
	
	<div class="mui-content">
		{volist name="goods_arr" id="vo"}
			<div class="topaybox" name="goods_div" id="goods_div_{$i}">
				<div class="top2_bottom clearfix">
					<div class="top2_erwmbox">
						<div class="erweima">
							<div id="goods_{$vo.id}"></div>
						</div>
					</div>
					<div class="top2_pribox">
						<div class="spname">{$vo.goods_name}</div>
						<div class="huiyj"><em>{$vo.sale_price}</em>元</div>
						<div class="huiyj">鼓励金价：<em>{$vo.sale_price - $vo.dk_price}</em>元<i style="color: white;">+{$vo.dk_price}元鼓励金</i></div>
					</div>
				</div>
			</div>
		{/volist}
	</div>
	<div class="mui-content">
		<div id='cut_img'></div>
	</div>
	<div class="payment_butbox">
		<button type="button" onclick="savepic()" class="payment_but topay2btn">保存二维码</button>
	</div>
</body>
</html>
<script type="text/javascript" src="__PUBLIC__/static/js/jquery.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/static/layui/layui.all.js"></script>
<script type="text/javascript" src="__PUBLIC__/static/js/jquery.form.js"></script>
<script type="text/javascript" src="__PUBLIC__/static/js/jquery.qrcode.js"></script>
<script type="text/javascript" src="__PUBLIC__/static/js/utf.js"></script>
<script type="text/javascript" src="__PUBLIC__/static/js/zepto-1.1.6.min.js"></script>
<script type="text/javascript" src='__PUBLIC__/static/js/html2canvas.js'></script>
<script>
	var index = layer.load(0, {shade: false,time:  8000});
	change_code();
	var arr=new Array();
	function change_code(){
		var index = layer.load(0, {shade: false,time:  8000});
		//$("#chain_se").attr("disabled","disabled");
		//商品基础url
		var goods_list = <?php  echo json_encode($goods_arr); ?>;
		//分店
		var chain_id = 0;
	
			//获取门店id
			for(var i=0;i<goods_list.length;i++){
				$("#goods_"+goods_list[i].id).html("");
				//商品图片
				var goods_img = goods_list[i].thumb;
				//商品地址
				var goods_url = goods_list[i].code_url;
				$("#goods_"+goods_list[i].id).qrcode({
			        render : "canvas",    		//设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好
			        text 		: goods_url,    //扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接
			        width 		: "180",    	//二维码的宽度
			        height 		: "180",    	//二维码的高度
			        background 	: "#ffffff",    //二维码的后景色
			        foreground 	: "#000000",    //二维码的前景色
			        src			: goods_img  	//二维码中间的图片
			    });
			    
			    //图片保存
			    var cut_i = i+1;
			    var cut_id = "#goods_div_"+cut_i;
			    
			    html2canvas($(cut_id), {
				 onrendered: function (canvas) {
				     var url = canvas.toDataURL(); //base64数据
				     var image = new Image();
				     image.src = url;
				     image.width=50;
				     image.height=50;
				     image.name = 'div_img';
				     arr.push(url);
				     $('#cut_img').append(image);
				 
				   }
				});
			}
	
		$('#cut_img').hide();
	}
	
	
</script>
<script>
function open_down(){
	window.location.href="down_zip.html?length="+arr.length;
}
//下载图片
function savepic() {
	var index = layer.load(0, {shade: false,time:  8000});
		$.ajax({
			type:"post",
			data:{imgs:arr},
			url:"export_img",
			success:function(){
				setTimeout('open_down()',5000);
			}
		});
	return;
	/*var goods_div = $("img[name='div_img']");
	
	for(var i=0;i<goods_div.length;i++){
		var img_src = goods_div[i].src;
		var type = 'png';
		// 下载后的问题名
		var filename = 'pic_' + (new Date()).getTime() + '.' + type;
		// download
		saveFile(img_src,filename);
	}*/
}
/**
 * 在本地进行文件保存
 */
var saveFile = function(data, filename){
    var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    save_link.href = data;
    save_link.download = filename;
   
    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    save_link.dispatchEvent(event);
};
</script>